// 导入时间
// FIXME:这里是浏览器执行片段 , 浏览器不认 require
// const {dateFormat} = require("./timeParse");

// qs cdn 获取网页参数 ?name=xxx 之类的
// https://cdnjs.cloudflare.com/ajax/libs/qs/6.10.1/qs.min.js
// 放在引入 main.js 的 chat.html 后 再在 main.js 中引入
const params = Qs.parse(location.search, {ignoreQueryPrefix: true})

// 这里从浏览器获取 name
// 定义 本客户端的用户名
const name = params.name
// 定义 加入的房间名称(房间号)
const room = params.room


// 在 标题处 显示当前 房间 & 用户 名称
document.getElementById('room_and_name_placeholder').innerHTML = `${room} <br> <span class="fontsizeMin">${name}</span>`

// 在 对话框 显示本地时间:
document.querySelector('.local-time').innerHTML =
    `<span class="local-time">${dateFormat("YYYY-mm-dd HH:MM:SS", new Date())}</span>`

// 定义 本房间用户列表
const userListEl = document.querySelector('.user-list')

// 定义 房间列表
const roomListEl = document.querySelector('.room-name')


// 客户端 - 显示消息右栏的聊天内容
const socket = io();

// 发送 本客户端所在的的房间消息
socket.emit("joinRoom", {name, room})

// console.log(name, room)
// 接收 服务端的系统消息
socket.on("sysMessage", message => {
    // console.log("Client_on:")
    // console.log(message)

    // message.type     : 系统信息类型 : "enterBroadCast" "exitBroadCast" ""
    // message.name     : 系统信息首要指明对象
    // message.room     : 房间号 (从 我这里 发出去 又返回来的)
    // message.welcome  : 欢迎词
    // message.time     : 获得服务器的 时间戳
    if (message.room !== room) return

    // 把获取的消息通过DOM写入UI
    const isMine = message.name === name;
    // console.log(isMine)

    let welcomeMsg = document.createElement('div')
    // --> 判断服务器传来的信息是给自己的还是给其他人的
    if (isMine) {
        welcomeMsg.className = "d-flex justify-content-center my-3"
        welcomeMsg.innerHTML =
            `
                <div class="card-header bg-info py-1 w-auto
                        text-dark text-center fw-light fontsizeMin">
                    欢迎 <span class="text-warning">${message.name}</span>
                    加入 <span class="text-warning">${message.room}</span>
                    <br>
                    服务器时间戳:
                    <span class="local-time">${message.time}</span>
                </div>
            `
    } else {
        welcomeMsg.className = "d-flex justify-content-center my-3"
        welcomeMsg.innerHTML =
            `
                <div class="card-header bg-secondary py-1 w-auto
                            text-dark text-center fw-light fontsizeMin">
                    用户 <span class="text-warning">${message.name}</span>
                    加入了房间 <span class="text-warning">${message.room}</span>
                    <br>
                    服务器时间戳:
                    <span class="local-time">${message.time}</span>
                </div>
            `
    }
    document.querySelector('.message-container').append(welcomeMsg)
    // document.querySelector('.message-container').innerHTML += ``

})

// 接收 服务端发来的 本房间的 用户列表
socket.on('roomUser', userList => {

    // 每次刷新UI上删除之前的显示
    // 重置本房间用户列表
    while (userListEl.childNodes.length > 2) {
        userListEl.removeChild(userListEl.lastChild)
    }

    // 读取 服务端 传来的 用户名单 , 并依次在 html 上加入
    userList.map(user => {
        let userListEl_li = document.createElement('li')
        userListEl_li.className = "list-group-item"
        userListEl_li.innerHTML = user.name
        userListEl.append(userListEl_li)
    })

})

// 接收 服务端发来的 全聊添的 房间列表
socket.on('roomList', roomList => {
    console.log(roomList)

    // 每次刷新UI上删除之前的显示
    // 重置本房间用户列表
    while (roomListEl.childNodes.length > 2) {
        roomListEl.removeChild(roomListEl.lastChild)
    }

    // 读取 服务端 传来的 用户名单 , 并依次在 html 上加入
    roomList.map(room => {
        let roomListEl_li = document.createElement('li')
        roomListEl_li.className = "list-group-item"
        roomListEl_li.innerHTML = room
        roomListEl.append(roomListEl_li)
    })
})
// document.querySelector('.room-name').innerHTML +=
//     `<li class="list-group-item">${room}</li>`

// 监听 客户端的表单提交
document.getElementById('chat-form').addEventListener('submit', e => {
    // 阻止默认的程序
    e.preventDefault();

    const msgEl = document.getElementById('msg')

    if (!msgEl.value) {
        alert("请输入消息之后再发送")
        return
    }

    // 监听到提交表单后向服务端发送表单信息
    // [chatMessage]message.name
    // [chatMessage]message.content
    // [chatMessage]message.time
    socket.emit('chatMessage',
        {
            name,
            content: msgEl.value,
            time: dateFormat("YYYY-mm-dd HH:MM:SS", new Date()),
        });

    // 提交消息之后清除 在输入框中已发送的消息
    msgEl.value = "";
})

// 接收 由服务端发来的 自己 和 其他客户端 的聊添消息
socket.on("chatMessage", message => {

        // 把获取的消息通过DOM写入UI
        const isMine = message.name === name;
        // --> tips: 使用 document.querySelector("#ID").append() 需要前置动作
        // --> 即用 document.createElement('div'); 创建一个新的 tag 对象
        // --> 然后把新的对象的 class 和 其他 attribute 搞定
        // --> 再往里面填充 tag对象里面的 innerHTML
        // --> 最后再把整个 tag对象 append 到 查找到的 Selector 处
        let newMsg = document.createElement('div');
        newMsg.className = `d-flex ${isMine ? "justify-content-end" : "justify-content-start"}  my-3`
        newMsg.innerHTML = `
    <div class="card w-auto ${isMine ? "bg-success text-light" : "bg-light text-dark"}">
        <div class="card-header  ${isMine ? "bg-success text-end" : "bg-light text-start"} bg-gradient py-0 fw-bold border-bottom-0">
         <!--   ${message.name}                 -->
         <!--   <i class="bi bi-chat-fill"></i> -->
            ${isMine ?
            `${message.name}` + " <i class='bi bi-chat-fill'></i>"
            :
            "<i class='bi bi-chat-fill'></i> " + `${message.name}`
        }
        </div>
        <div class="card-body pt-0 pb-1 ${isMine ? "text-end" : "text-start"}">${message.content}</div>
        <div class="card-footer ${isMine ? "text-end text-light" : "text-start text-dark"}  text-opacity-50 fontsizeMin py-0">
            <!--${dateFormat("YYYY-mm-dd HH:MM:SS", new Date())}-->
            ${message.time}    
        </div>
    </div>
            `;
        document.querySelector('.message-container').append(newMsg);

        // 在接收到消息之后把 消息窗口 滚动到最下端 , 以显示最新的消息
        // NOTE: js 滚动到最下端 , 这是个笔记点
        const scrollEl = document.querySelector('.scrollPage')
        scrollEl.scrollTop = scrollEl.scrollHeight

    }
)